<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>课程列表</title>
<link rel="stylesheet" type="text/css"
	href="../webjars/jquery-ui/1.12.1/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css"
	href="../webjars/jquery-ui/1.12.1/themes/ui-lightness/theme.css" />
<link rel="stylesheet" type="text/css"
	href="../webjars/free-jqgrid/4.15.5/dist/css/ui.jqgrid.css" />

<script type="text/javascript"
	src="../webjars/jquery/3.3.1/dist/jquery.js"></script>
<script type="text/javascript"
	src="../webjars/jquery-ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript"
	src="../webjars/free-jqgrid/4.15.5/dist/jquery.jqgrid.min.js"></script>
<script type="text/javascript"
	src="../webjars/free-jqgrid/4.15.5/dist/i18n/grid.locale-cn.js"></script>
<style>
	/* html, body {
			margin: 0;
			padding: 0;
			font-size: 75%;
		} */
    .ui-jqgrid {            
		font-size:14px;       
	}

    .ui-jqgrid-view {            
		font-size:14px;       
	}

    .ui-jqgrid .ui-jqgrid-htable th {
        height:28px;       
	    font-size:14px;       
	}

    .ui-jqgrid .ui-jqgrid-pager {
		height:28px;           
		font-size:14px;       
	}

    .ui-jqgrid .ui-pg-input {            
		font-size:1em;           
		height:20px;       
	}

    .ui-jqgrid .i-pg-selbox {            
		font-size:0.9em;           
		height:20px;       
	}

    .ui-jqgrid tr.ui-row-ltr td {            
		text-align:center;     
	}
	
</style>

<script type="text/javascript">
	var options = {
		url : 'list',
		editurl:'save',
		caption : '课程列表',
		width : 1000,
		height : 'auto',
		datatype : 'json',
		mtype : 'post',
		rowNum : 10,
		rowList : [5, 10, 20, 50 ],
		prmNames : {
			search : "search"
		},
		sortname : 'id',
		viewrecords : true,
		pager : '#pager2',
		jsonReader : {
			repeatitems : false,
			id : 'id'
		},
		colModel : [ {
			label : 'id',
			name : 'id',
			index : 'id',
			align : 'center',
			sortable : true,
			width : 50,
			editable:false,
			search : false,
			//hidden : true,
			sorttype : 'int'
		}, {
			label : '课程名称',
			editable:true,
			name : 'name',
			index : 'name',
			align : 'center',
			sortable : true,
			width : 100,
			sorttype : 'text'
		} ]
	}
	$(function() {
		$('#list2').jqGrid(options);
		$("#list2").jqGrid('navGrid', '#pager2', {
			edit : true,
			add : true,
			del : true
		},{	top:50,
			left:100,
			url:'update',
			savekey:[true,13],
			closeAfterEdit:true
		},{	
			top:50,
			left:100,
			url:'add',
			savekey:[true,13]//,
			//closeAfterAdd:true
		},{
			top:50,
			left:100,
			savekey:[true,13],
			url:'delete'
		},{
			top:50,
			left:100 ,
			multipleSearch : true 
		},{
			
		}
		);
	});
</script>

</head>
<body>
	<table id="list2"></table>
	<div id="pager2"></div>
</body>
</html>